// 动态创建确定组件
// 预期需求：
// Confirm({ title: '标题', text: '您确定从购物车删除选中的商品吗？' }).then(() => {
//   store.dispatch('cart/batchDeleteCart')
// }).catch(e => {})

import { createVNode, render } from 'vue'
import XtxConfirm from '@/components/library/xtx-confirm.vue'

// 准备一个用于放自定义组件的容器
const divVNode = createVNode('div', { class: 'xtx-confirm-container' })
render(divVNode, document.body)
// 获取 DOM 节点
const container = divVNode.el

// 导出函数可通过调用 Confirm() 函数动态创建 XtxConfirm 组件
// 函数的返回值是 Promise 对象
export default ({ title, text }) => {
  return new Promise((resolve, reject) => {
    // 点击了确定和取消都要销毁组件, 所以确定和取消事件要写在这里
    const confirmCallback = () => {
      resolve('点击了确认')
      render(null, container)
    }
    const cancelCallback = () => {
      reject(new Error('点击了取消'))
      render(null, container)
    }
    const confirm = createVNode(XtxConfirm, { title, text, confirmCallback, cancelCallback })
    render(confirm, container)
  })
}
